<template>
    <view class="table-list">
        <scroll-view class="table-list-box"
            :style="{height: showTotal ? 'calc(100% - 100rpx)' : '100%'}"
            @scrolltolower="scrolltolower"
            @refresherrefresh="refresherrefresh"
            refresher-enabled
            :refresher-triggered="refresherTriggered"
            scroll-with-animation
            scroll-y>
            <view class="table-list-item" v-for="(item, index) in dataList" :key="index">
                <slot :scope="item"></slot>
            </view>
            <view style="padding: 24rpx 0;" v-if="dataList.length">
                <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText"  />
            </view>
            <u-empty mode="list" v-else></u-empty>
        </scroll-view>
        <view class="total" v-if="showTotal">
            总数：80
        </view>
    </view>
</template>

<script lang="ts" setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref, defineProps, type Ref, watch } from 'vue'
const status = ref('nomore')
const iconType = ref('flower')
const loadText = ref({
    loadmore: '轻轻上拉',
    loading: '努力加载中',
    nomore: '实在没有了'
})
const refresherTriggered = ref(false)
const props = defineProps({
    loadData: {
        type: Function
    },
    data: {
        type: Array,
        default: () => []
    },
    defaultSearch: {
        type: Object
    },
    showTotal: {
        type: Boolean,
        default: false
    }
})
watch(() => props.defaultSearch, () => {
    pages.value.current = 1
    getData()
}, {
    deep: true
})
const pages = ref({
    current: 1,
    size: 15
})
const total = ref(0)
const dataList:Ref<any> = ref([])
const scrolltolower = () => {
    console.log(222222222222)
    if (total.value > dataList.value.length) {
        pages.value.current += 1
        getData()
    }
}

const refresherrefresh = () => {
    refresherTriggered.value = true
    pages.value.current = 1
    getData()
}
const getData = async () => {
    if (props.loadData) {
        const params = {
            cp: pages.value.current,
            ps: pages.value.size,
            ...props.defaultSearch
        }
        status.value ='loading'
        let res = await props.loadData(params)
        if (pages.value.current == 1) {
            dataList.value = res.records
        } else {
            dataList.value = [...dataList.value, ...res.records]
        }
        total.value = res.total
        if (total.value > dataList.value.length) {
            status.value ='loadmore'
        } else {
            status.value ='nomore'
        }
        refresherTriggered.value = false
    } else if (props.data) {
        dataList.value = props.data
        total.value = props.data.length
    }
}
onShow(() => {
    getData()
})
</script>

<style lang="scss">
    .table-list{
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .table-list-box{
            flex: 1;
        }
        .total{
            padding: 24rpx;
            border-top: 1px #ddd solid;
            background: #f3f3f3;
        }
    }
</style>